<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input{
        margin-bottom: 10px;
        margin-top: 10px;
    }
</style>
<body>
    <h3>简单的表单</h3>
    <h4 style="color: lightsteelblue;"><em>基本信息</em></h4>
    <form action="#" autocomplete="on">
        <fieldset>
            <legend>客户信息</legend>
            姓名：<input type="text" name="name" id="" placeholder="请输入姓名" required>
            <br>
            电话：<input type="tel" name="tel" id="" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" autocomplete="off" required placeholder="格式：11位">
            <br>
            邮箱地址：<input type="email" name="email" id="" required placeholder="请输入邮箱地址">
        </fieldset>
        <fieldset>
            <legend>图书</legend>
            <input list="book">
            <datalist id="book">
                <option value="许三观卖血记"></option>
                <option value="活着"></option>
                <option value="围城"></option>
            </datalist>
            数量(最大：5) <input type="number" name="" id="" max="5" min="1">
        </fieldset>
        <input type="submit" value="提交">
    </form>
</body>
</html>